<template>
  <view class="page">
    <!-- 导航栏 - 只有返回按钮 -->
    <view class="navbar">
      <view class="navbar-content">
        <view class="left-section" @tap="goBack">
          <image
            src="/static/icons/left_arrow.png"
            class="back-icon"
            mode="aspectFit"
          ></image>
        </view>
        <text class="navbar-title">企业主页</text>
        <view class="right-section"></view>
      </view>
    </view>

    <!-- 公司基本信息 -->
    <view class="company-header">
      <view class="company-info">
        <text class="company-name">{{ companyInfo.companyName || '暂无公司名称' }}</text>
        <view class="company-basic-info">
          <text class="info-item">{{ companyInfo.shortName || '暂无' }}</text>
          <text class="info-separator">·</text>
          <text class="info-item">{{ getPeopleSizeDisplayText(companyInfo.peopleSize) || '暂无' }}</text>
          <text class="info-separator">·</text>
          <text class="info-item">{{ getNatureDisplayText(companyInfo.nature) || '暂无' }}</text>
        </view>
      </view>
      <image 
        :src="companyInfo.logo || '/static/images/logo.png'" 
        class="company-logo" 
        mode="aspectFit"
      ></image>
    </view>

         <!-- 工作时间 -->
     <view class="work-time-section">
       <view class="work-time-info">
         <view class="time-items">
           <view 
             v-for="(timeItem, index) in workTimeTagsWithIcons" 
             :key="index" 
             class="time-item"
           >
             <image 
               v-if="timeItem.icon" 
               :src="timeItem.icon" 
               class="time-icon" 
               mode="aspectFit"
             ></image>
             <text class="time-text">{{ timeItem.text }}</text>
           </view>
         </view>
       </view>
     </view>

         <!-- 企业福利 -->
     <view class="company-benefits">
       <view class="benefits-header">
         <text class="benefits-title">企业福利</text>
         <view class="time-arrow" @tap="showWorkTimePopup">
           <text class="arrow-text">></text>
         </view>
       </view>
       <scroll-view 
         scroll-x="true" 
         class="benefits-scroll"
         :scroll-with-animation="true"
         :enhanced="true"
         :bounces="false"
         :show-scrollbar="false"
         :enable-flex="true"
         :scroll-anchoring="true"
         @touchstart="onTouchStart"
         @touchmove="onTouchMove"
         @touchend="onTouchEnd"
         @wheel="onWheel"
       >
        <block v-for="(benefit, index) in allBenefitsWithIcons" :key="index">
          <view class="benefit-item">
            <image 
              v-if="benefit.icon" 
              :src="benefit.icon" 
              class="benefit-icon" 
              mode="aspectFit"
            ></image>
            <text class="benefit-text">{{ benefit.text }}</text>
          </view>
        </block>
      </scroll-view>
    </view>

         <!-- 公司地址 -->
     <view class="company-address">
       <view class="address-header">
         <text class="address-title">公司地址</text>
       </view>
       <text class="address-content">{{ fullAddress }}</text>
     </view>

    <!-- 公司介绍 -->
    <view class="company-intro">
      <text class="intro-title">公司介绍</text>
      <view class="intro-content-wrapper">
        <text class="intro-content" :class="{ 'intro-content-collapsed': !isIntroExpanded }">
          {{ companyInfo.introduction || '暂无介绍' }}
        </text>
        <view v-if="shouldShowIntroToggle" class="intro-toggle">
          <text 
            class="toggle-text" 
            :style="{ color: isIntroExpanded ? '#666' : '#00bdb4' }"
            @tap="toggleIntro"
          >
            {{ isIntroExpanded ? '收起' : '查看更多' }}
          </text>
        </view>
      </view>
    </view>

    <!-- 公司相册 -->
    <view class="company-photos">
      <text class="photos-title">公司相册</text>
      <view v-if="!photoList.length" class="no-photos">
        <text class="no-photos-text">暂无相册</text>
      </view>
      <swiper 
        v-else 
        class="photos-swiper" 
        :indicator-dots="true" 
        :autoplay="false"
        :circular="false"
        indicator-color="rgba(255, 255, 255, 0.3)"
        indicator-active-color="#ffffff"
      >
        <swiper-item v-for="(photo, index) in photoList" :key="index">
          <image 
            :src="photo" 
            class="photo-item" 
            mode="aspectFill"
            @tap="previewPhoto(index)"
          ></image>
        </swiper-item>
      </swiper>
    </view>

         <!-- 工商信息 -->
     <view class="company-business">
       <text class="business-title">工商信息</text>
       <view class="business-items">
         <view class="business-item">
           <text class="item-label">成立时间</text>
           <text class="item-value">{{ companyInfo.buildDate || '暂无' }}</text>
         </view>
         <view class="business-item">
           <text class="item-label">注册资本</text>
           <text class="item-value">{{ companyInfo.registCapital || '暂无' }}</text>
         </view>
         <view class="business-item">
           <text class="item-label">注册地址</text>
           <text class="item-value">{{ companyInfo.registPlace || '暂无' }}</text>
         </view>
         <view class="business-item">
           <text class="item-label">法人代表</text>
           <text class="item-value">{{ companyInfo.legalRepresentative || '暂无' }}</text>
         </view>
         <view class="business-item">
           <text class="item-label">公司性质</text>
           <text class="item-value">{{ getNatureDisplayText(companyInfo.nature) || '暂无' }}</text>
         </view>
         <view class="business-item">
           <text class="item-label">人员规模</text>
           <text class="item-value">{{ getPeopleSizeDisplayText(companyInfo.peopleSize) || '暂无' }}</text>
         </view>
         <view class="business-item">
           <text class="item-label">融资阶段</text>
           <text class="item-value">{{ companyInfo.financStage || '暂无' }}</text>
         </view>
       </view>
     </view>

     <!-- 工作时间与福利弹窗 -->
     <uni-popup ref="workTimePopup" type="bottom" :safe-area="true">
       <view class="popup-content">
         <view class="popup-header">
           <text class="popup-title">工作时间与福利</text>
           <text class="popup-subtitle">福利信息由公司提供,可能根据实际岗位有所不同。具体岗位可与HR确认</text>
         </view>
         
         <view class="popup-divider"></view>
         
         <view class="popup-section">
           <text class="section-title">工作时间</text>
           <view class="time-list">
             <view 
               v-for="(timeItem, index) in workTimeTagsWithIcons" 
               :key="index" 
               class="time-list-item"
             >
               <image 
                 v-if="timeItem.icon" 
                 :src="timeItem.icon" 
                 class="time-list-icon" 
                 mode="aspectFit"
               ></image>
               <text class="time-list-text">{{ timeItem.text }}</text>
             </view>
           </view>
         </view>
         
         <view class="popup-divider"></view>
         
         <view class="popup-section">
           <text class="section-title">员工福利</text>
           <view class="benefits-list">
             <view 
               v-for="(benefit, index) in allBenefitsWithIcons" 
               :key="index" 
               class="benefit-list-item"
             >
               <image 
                 v-if="benefit.icon" 
                 :src="benefit.icon" 
                 class="benefit-list-icon" 
                 mode="aspectFit"
               ></image>
               <view class="benefit-info">
                 <text class="benefit-name">{{ benefit.text }}</text>
                 <text class="benefit-desc">{{ benefit.remark || '暂无描述' }}</text>
               </view>
             </view>
           </view>
         </view>
         
         <view class="popup-close" @tap="closeWorkTimePopup">
           <text class="close-text">关闭</text>
         </view>
       </view>
     </uni-popup>


  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { getCompanyDetailByIdApi, getDictDataKeysListByTypeKeyAndDataKeyApi } from '@/api/company.js';

// 页面参数
const companyId = ref('')

// 公司数据
const companyInfo = ref({
  companyName: '',
  shortName: '',
  logo: '',
  country: '',
  province: '',
  city: '',
  district: '',
  address: '',
  nature: '',
  peopleSize: '',
  industry: '',
  financStage: '',
  workTime: '',
  introduction: '',
  advantage: '',
  benefits: '',
  bonus: '',
  subsidy: '',
  buildDate: '',
  registCapital: '',
  registPlace: '',
  legalRepresentative: '',
  photos: '' // 新增 photos 字段
});

// 字典数据存储
const dictionaryData = ref({
  company_nature: {},      // 公司性质
  staff_size: {},          // 人员规模
  overtime_situation: {},  // 加班情况
  rest_time: {},           // 休息时间
  company_advantage: {},   // 公司优势
  company_welfare: {},     // 福利待遇
  salary_benefit: {},      // 薪资福利
  subsidy_allowance: {}    // 补助津贴
});

// 获取页面参数
const getPageParams = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};
  
  companyId.value = options.companyId || '';
  console.log('企业查看页面参数:', { companyId: companyId.value });
};

// 公司相册列表
const photoList = computed(() => {
  if (!companyInfo.value.photos || !companyInfo.value.photos.trim()) {
    return [];
  }
  // 通过逗号分割photos字符串，得到URL数组
  return companyInfo.value.photos.split(',').filter(url => url.trim());
});

// 计算完整地址
const fullAddress = computed(() => {
  const { country, province, city, district, address } = companyInfo.value;
  const parts = [country, province, city, district, address].filter(Boolean);
  return parts.join(' ');
});

// 计算工作时间标签（带图标）
const workTimeTagsWithIcons = computed(() => {
  if (!companyInfo.value.workTime || !companyInfo.value.workTime.trim()) {
    return [{
      text: '暂无工作时间',
      icon: '/static/icons/company/time.png'
    }];
  }
  
  // 通过空格分割工作时间
  const times = companyInfo.value.workTime.split(' ').filter(Boolean);
  if (times.length === 0) {
    return [{
      text: '暂无工作时间',
      icon: '/static/icons/company/time.png'
    }];
  }
  
  const result = [];
  times.forEach((item, index) => {
    if (index === 0) {
      // 第一个是时间范围，使用固定的时间图标
      result.push({
        text: item,
        icon: '/static/icons/company/time.png'
      });
    } else if (index === 1) {
      // 第二个是加班情况，使用字典数据中的图标
      const overtimeData = dictionaryData.value.overtime_situation[item];
      result.push({
        text: overtimeData ? overtimeData.value : item,
        icon: overtimeData ? overtimeData.icon : null
      });
    } else if (index === 2) {
      // 第三个是休息时间，使用字典数据中的图标
      const restTimeData = dictionaryData.value.rest_time[item];
      result.push({
        text: restTimeData ? restTimeData.value : item,
        icon: restTimeData ? restTimeData.icon : null
      });
    } else {
      result.push({
        text: item,
        icon: null
      });
    }
  });
  
  return result;
});

// 获取公司性质显示文本
const getNatureDisplayText = (dataKey) => {
  if (!dataKey) return '';
  const item = dictionaryData.value.company_nature[dataKey];
  return item ? item.value : dataKey;
};

// 获取人员规模显示文本
const getPeopleSizeDisplayText = (dataKey) => {
  if (!dataKey) return '';
  const item = dictionaryData.value.staff_size[dataKey];
  return item ? item.value : dataKey;
};

// 获取带图标的企业福利数据
const allBenefitsWithIcons = computed(() => {
  const benefits = [];
  
  // 公司优势
  if (companyInfo.value.advantage && companyInfo.value.advantage.trim()) {
    const advantageItems = companyInfo.value.advantage.split(' ').filter(item => item.trim());
    advantageItems.forEach(item => {
      const advantageData = dictionaryData.value.company_advantage[item];
      benefits.push({
        text: advantageData ? advantageData.value : item,
        icon: advantageData ? advantageData.icon : null,
        remark: advantageData ? advantageData.remark : null
      });
    });
  }
  
  // 福利待遇
  if (companyInfo.value.benefits && companyInfo.value.benefits.trim()) {
    const benefitsItems = companyInfo.value.benefits.split(' ').filter(item => item.trim());
    benefitsItems.forEach(item => {
      const benefitData = dictionaryData.value.company_welfare[item];
      benefits.push({
        text: benefitData ? benefitData.value : item,
        icon: benefitData ? benefitData.icon : null,
        remark: benefitData ? benefitData.remark : null
      });
    });
  }
  
  // 薪资福利
  if (companyInfo.value.bonus && companyInfo.value.bonus.trim()) {
    const bonusItems = companyInfo.value.bonus.split(' ').filter(item => item.trim());
    bonusItems.forEach(item => {
      const bonusData = dictionaryData.value.salary_benefit[item];
      benefits.push({
        text: bonusData ? bonusData.value : item,
        icon: bonusData ? bonusData.icon : null,
        remark: bonusData ? bonusData.remark : null
      });
    });
  }
  
  // 补助津贴
  if (companyInfo.value.subsidy && companyInfo.value.subsidy.trim()) {
    const subsidyItems = companyInfo.value.subsidy.split(' ').filter(item => item.trim());
    subsidyItems.forEach(item => {
      const subsidyData = dictionaryData.value.subsidy_allowance[item];
      benefits.push({
        text: subsidyData ? subsidyData.value : item,
        icon: subsidyData ? subsidyData.icon : null,
        remark: subsidyData ? subsidyData.remark : null
      });
    });
  }
  
  return benefits;
});

// 预览图片
const previewPhoto = (index) => {
  uni.previewImage({
    urls: photoList.value,
    current: index,
    indicator: 'number'
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};

// 节流函数
const throttle = (func, delay) => {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      return func.apply(this, args);
    }
  };
};

// 触摸事件处理 - 解决H5浏览器滚动问题
const touchStartX = ref(0);
const touchStartY = ref(0);
const touchStartTime = ref(0);
const isScrolling = ref(false);
const lastTouchMoveTime = ref(0);
const touchEventFailed = ref(false);

const onTouchStart = (e) => {
  touchStartX.value = e.touches[0].clientX;
  touchStartY.value = e.touches[0].clientY;
  touchStartTime.value = Date.now();
  isScrolling.value = false;
  lastTouchMoveTime.value = Date.now();
  touchEventFailed.value = false;
};

const onTouchMove = throttle((e) => {
  // 如果触摸事件处理失败，直接返回
  if (touchEventFailed.value) {
    return;
  }

  const now = Date.now();
  const touchX = e.touches[0].clientX;
  const touchY = e.touches[0].clientY;
  const deltaX = touchX - touchStartX.value;
  const deltaY = touchY - touchStartY.value;
  const deltaTime = now - touchStartTime.value;
  
  // 计算滑动距离和速度
  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
  const velocity = distance / deltaTime;
  
  // 防止过于频繁的触摸事件处理
  if (now - lastTouchMoveTime.value < 16) { // 约60fps
    return;
  }
  lastTouchMoveTime.value = now;
  
  // 如果是快速水平滑动且距离足够，才阻止默认行为
  if (Math.abs(deltaX) > Math.abs(deltaY) && 
      Math.abs(deltaX) > 15 && 
      velocity > 0.8 && 
      !isScrolling.value &&
      deltaTime > 100) { // 确保触摸时间足够长
    try {
      e.preventDefault();
    } catch (error) {
      // 触摸事件处理失败，标记为失败状态
      touchEventFailed.value = true;
      console.warn('Touch event handling failed, switching to fallback mode:', error);
    }
  }
  
  // 标记正在滚动
  if (Math.abs(deltaY) > 8) {
    isScrolling.value = true;
  }
}, 16); // 16ms节流，约60fps

const onTouchEnd = (e) => {
  // 触摸结束，重置状态
  isScrolling.value = false;
  // 延迟重置失败状态，避免频繁切换
  setTimeout(() => {
    touchEventFailed.value = false;
  }, 100);
};

// 鼠标滚轮事件 - 支持H5浏览器
const onWheel = (e) => {
  e.preventDefault();
  const scrollView = e.currentTarget;
  if (scrollView) {
    scrollView.scrollLeft += e.deltaY;
  }
};

// 弹窗引用
const workTimePopup = ref(null);

// 公司介绍展开状态
const isIntroExpanded = ref(false);

// 显示工作时间弹窗
const showWorkTimePopup = () => {
  workTimePopup.value.open();
};

// 关闭工作时间弹窗
const closeWorkTimePopup = () => {
  workTimePopup.value.close();
};

// 判断是否应该显示展开收起按钮
const shouldShowIntroToggle = computed(() => {
  const intro = companyInfo.value.introduction || '';
  return intro.length > 150;
});

// 切换公司介绍展开状态
const toggleIntro = () => {
  isIntroExpanded.value = !isIntroExpanded.value;
};

// 获取字典数据详情
const getDictionaryDataDetails = async () => {
  try {
    // 构建需要查询的字典数据列表
    const dictKeys = [];
    
    // 公司性质
    if (companyInfo.value.nature) {
      dictKeys.push({
        typeKey: 'company_nature',
        dataKey: companyInfo.value.nature
      });
    }
    
    // 人员规模
    if (companyInfo.value.peopleSize) {
      dictKeys.push({
        typeKey: 'staff_size',
        dataKey: companyInfo.value.peopleSize
      });
    }
    
    // 工作时间相关
    if (companyInfo.value.workTime) {
      const workTimeParts = companyInfo.value.workTime.split(' ');
      if (workTimeParts.length >= 2) {
        dictKeys.push({
          typeKey: 'overtime_situation',
          dataKey: workTimeParts[1]
        });
      }
      if (workTimeParts.length >= 3) {
        dictKeys.push({
          typeKey: 'rest_time',
          dataKey: workTimeParts[2]
        });
      }
    }
    
    // 公司优势相关
    if (companyInfo.value.advantage) {
      const advantageItems = companyInfo.value.advantage.split(' ').filter(item => item.trim());
      advantageItems.forEach(item => {
        dictKeys.push({
          typeKey: 'company_advantage',
          dataKey: item
        });
      });
    }
    
    if (companyInfo.value.benefits) {
      const benefitsItems = companyInfo.value.benefits.split(' ').filter(item => item.trim());
      benefitsItems.forEach(item => {
        dictKeys.push({
          typeKey: 'company_welfare',
          dataKey: item
        });
      });
    }
    
    if (companyInfo.value.bonus) {
      const bonusItems = companyInfo.value.bonus.split(' ').filter(item => item.trim());
      bonusItems.forEach(item => {
        dictKeys.push({
          typeKey: 'salary_benefit',
          dataKey: item
        });
      });
    }
    
    if (companyInfo.value.subsidy) {
      const subsidyItems = companyInfo.value.subsidy.split(' ').filter(item => item.trim());
      subsidyItems.forEach(item => {
        dictKeys.push({
          typeKey: 'subsidy_allowance',
          dataKey: item
        });
      });
    }
    
    if (dictKeys.length > 0) {
      const result = await getDictDataKeysListByTypeKeyAndDataKeyApi(dictKeys);
      if (result) {
        // 将结果按typeKey分组存储
        Object.keys(result).forEach(typeKey => {
          if (result[typeKey] && Array.isArray(result[typeKey])) {
            result[typeKey].forEach(item => {
              if (!dictionaryData.value[typeKey]) {
                dictionaryData.value[typeKey] = {};
              }
              dictionaryData.value[typeKey][item.dataKey] = item;
            });
          }
        });
      }
    }
  } catch (error) {
    console.error('获取字典数据详情失败:', error);
  }
};

// 获取公司详情
const getCompanyDetail = async () => {
  if (!companyId.value) {
    uni.showToast({
      title: '公司信息获取失败',
      icon: 'none'
    });
    return;
  }

  try {
    console.log('获取指定公司详情:', companyId.value);
    const companyData = await getCompanyDetailByIdApi(companyId.value);
    if (companyData) {
      companyInfo.value = companyData;
      console.log('获取公司详情成功:', companyData);
      
      // 获取字典数据详情
      await getDictionaryDataDetails();
    }
  } catch (error) {
    console.error('获取公司详情失败:', error);
    uni.showToast({
      title: '获取公司信息失败',
      icon: 'none'
    });
  }
};

onMounted(() => {
  // 先获取页面参数，再获取公司详情
  getPageParams();
  getCompanyDetail();
  console.log('企业查看页面加载成功');
});

// 定义onShow生命周期函数
function onShow() {
  console.log('companyView页面onShow触发');
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #32434d;
}

/* 导航栏样式 */
.navbar {
  background-color: #32434d;
  border-bottom: 1rpx solid #4a5a6a;
  padding-top: var(--status-bar-height);
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 88rpx;
  position: relative;
}

.left-section {
  display: flex;
  align-items: center;
  min-width: 80rpx;
  padding: 20rpx 0;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
  filter: brightness(0) invert(1);
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #ffffff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.right-section {
  display: flex;
  align-items: center;
  min-width: 80rpx;
  padding: 20rpx 0;
}

/* 公司头部信息 */
.company-header {
  background-color: #32434d;
  padding: 40rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.company-info {
  flex: 1;
  margin-right: 30rpx;
}

.company-name {
  font-size: 44rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 24rpx;
  display: block;
  line-height: 1.3;
}

.company-basic-info {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 8rpx;
}

.info-item {
  color: #cccccc;
  font-size: 24rpx;
}

.info-separator {
  color: #666666;
  font-size: 20rpx;
}

.company-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 16rpx;
  background-color: #ffffff;
}

/* 工作时间 */
.work-time-section {
  background-color: #32434d;
  padding: 0 30rpx 40rpx;
}

.work-time-info {
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.time-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  color: #ffffff;
  font-size: 28rpx;
}

.time-icon {
  width: 32rpx;
  height: 32rpx;
  flex-shrink: 0;
}

.time-text {
  color: #ffffff;
  font-size: 28rpx;
}

.time-items {
  display: flex;
  align-items: center;
  gap: 30rpx;
  flex: 1;
}

.time-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.time-arrow:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.arrow-text {
  color: #ffffff;
  font-size: 24rpx;
  font-weight: 500;
}

/* 公司福利 */
.company-benefits {
  background-color: #32434d;
  padding: 0 30rpx 40rpx;
}

.benefits-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.benefits-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
  display: block;
}

.benefits-scroll {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  align-self: center;
  margin-right: 10rpx;
  /* H5浏览器兼容性增强 */
  -webkit-overflow-scrolling: touch;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 确保在H5中可滚动 */
  position: relative;
  z-index: 1;
  /* 优化触摸滚动 */
  touch-action: pan-x;
  /* 防止iOS橡皮筋效果 */
  overscroll-behavior: contain;
  /* 优化滚动性能 */
  will-change: scroll-position;
  /* 确保滚动容器有明确的尺寸 */
  min-height: 80rpx;
}

.benefit-item {
  display: inline-flex;
  align-items: center;
  gap: 16rpx;
  margin-right: 24rpx;
  background-color: transparent;
  padding: 20rpx 24rpx;
  border-radius: 30rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  min-width: 200rpx;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.benefit-item:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.05);
}

.benefit-icon {
  width: 44rpx;
  height: 44rpx;
  flex-shrink: 0;
}

.benefit-text {
  font-size: 32rpx;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* 公司地址 */
.company-address {
  background-color: #32434d;
  padding: 0 30rpx 40rpx;
}

.address-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding-left: 0;
}

.address-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
}

.address-content {
  font-size: 28rpx;
  color: #cccccc;
  line-height: 1.6;
}

/* 公司介绍 */
.company-intro {
  background-color: #32434d;
  padding: 0 30rpx 40rpx;
}

.intro-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 20rpx;
  display: block;
}

.intro-content-wrapper {
  position: relative;
}

.intro-content {
  font-size: 28rpx;
  color: #cccccc;
  line-height: 1.8;
  text-align: justify;
  transition: all 0.3s ease;
}

.intro-content-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  text-overflow: ellipsis;
}

.intro-toggle {
  margin-top: 16rpx;
  text-align: right;
}

.toggle-text {
  font-size: 28rpx;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* 公司相册 */
.company-photos {
  background-color: #32434d;
  padding: 0 30rpx 40rpx;
}

.photos-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 20rpx;
  display: block;
}

.photos-swiper {
  height: 400rpx; /* 增加轮播图高度，让相册更清晰 */
}

.photo-item {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.no-photos {
  text-align: center;
  padding: 20rpx 0;
}

.no-photos-text {
  font-size: 28rpx;
  color: #cccccc;
}

/* 工商信息 */
.company-business {
  background-color: #32434d;
  padding: 0 30rpx 40rpx;
}

.business-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 30rpx;
  display: block;
}

.business-items {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.business-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}

.business-item:last-child {
  border-bottom: none;
}

.item-label {
  font-size: 28rpx;
  color: #cccccc;
}

.item-value {
  font-size: 28rpx;
  color: #ffffff;
  max-width: 400rpx;
  text-align: right;
}

/* 弹窗样式 */
.popup-content {
  background-color: #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 40rpx 30rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.popup-header {
  text-align: center;
  margin-bottom: 30rpx;
}

.popup-title {
  font-size: 40rpx;
  font-weight: 600;
  color: #333333;
  display: block;
  margin-bottom: 16rpx;
}

.popup-subtitle {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.5;
  display: block;
}

.popup-divider {
  height: 1rpx;
  background-color: #e5e5e5;
  margin: 30rpx 0;
}

.popup-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 20rpx;
  display: block;
}

.time-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.time-list-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 16rpx 0;
}

.time-list-icon {
  width: 40rpx;
  height: 40rpx;
  flex-shrink: 0;
}

.time-list-text {
  font-size: 32rpx;
  color: #333333;
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.benefit-list-item {
  display: flex;
  align-items: flex-start;
  gap: 24rpx;
  padding: 20rpx 0;
}

.benefit-list-icon {
  width: 56rpx;
  height: 56rpx;
  flex-shrink: 0;
  margin-top: 4rpx;
}

.benefit-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.benefit-name {
  font-size: 32rpx;
  color: #333333;
  font-weight: 700;
  font-family: "SimHei", "黑体", sans-serif;
}

.benefit-desc {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.4;
}

.popup-close {
  text-align: center;
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 16rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.popup-close:hover {
  background-color: #e5e5e5;
}

.close-text {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}
</style>

























